<template>
    <v-layout>
        <v-flex xs6>
            <v-parallax src="@/assets/files/loginBackground1.jpg" height="500">
                <v-layout
                        column
                        justify-center
                        class="white--text"
                >
                    <v-flex text-center xs2 class="mb-5">
                        <v-avatar
                                :tile="true"
                                :size="100"
                        >
                            <img
                                    v-if="true"
                                    src="@/assets/img/chen.png"
                                    alt="avatar"
                            >
                        </v-avatar>
                    </v-flex>
                    <v-flex xs1 text-center>
                        <v-btn outlined width="200" dark class="mb-2">create account
                        </v-btn>
                    </v-flex>
                    <v-flex xs1>
                        <div class="subheading mb-4 text-center">I'm waiting for you!</div>
                    </v-flex>
                </v-layout>
            </v-parallax>
        </v-flex>
        <v-flex xs6 class=" background-login">
            <v-layout
                    fill-height
                    column
                    justify-center
                    class="white--text"
            >
                <v-flex xs1 text-center>
                    <v-card-title>
                        <span class="headline login-title">登录</span>
                    </v-card-title>
                </v-flex>
                <v-flex xs4 text-center mb-3>
                    <v-card-text>
                        <v-container>
                            <v-form
                                    ref="loginForm"
                                    v-model="loginValid"
                                    :lazy-validation="lazy"
                            >
                                <v-row>
                                    <v-text-field
                                            label="用户名"
                                            v-model="username"
                                            name="username"
                                            hint="至少输入2位"
                                            :rules="[rules.required]"
                                            solo
                                            placeholder="输入你的用户名"
                                    />
                                </v-row>
                                <v-row>
                                    <v-text-field
                                            v-model="password"
                                            :type="visible ? 'text' : 'password'"
                                            name="password"
                                            :rules="[rules.required]"
                                            placeholder="输入你的密码"
                                            hint="至少输入6位"
                                            solo
                                            @click:append="visible = !visible"
                                    />
                                </v-row>
                            </v-form>
                        </v-container>
                    </v-card-text>
                </v-flex>
                <v-flex xs2 text-center>
                    <v-card-actions class="grid-list-xl justify-center">
                        <v-btn text small class="login-text">Forgot password?</v-btn>
                        <v-btn dark color="#409EFF" width="200" @click="login">登录</v-btn>
                    </v-card-actions>
                    <auth ref="auth" v-on:loginEvent="loginEvent" v-on:logoutEvent="logoutEvent"/>
                </v-flex>
            </v-layout>

        </v-flex>
    </v-layout>
</template>

<script>
    import AuthCommon from './common/AuthCommon.vue';

    export default {
        name: "login",
        components: {
            'auth': AuthCommon
        },
        data: () => ({
            lazy: false,
            loginValid: true,//登录表单是否通过校验
            visible: false,//是否显示密码
            rules: {
                required: value => !!value || '输入点什么东西啊混蛋！',
                min: v => v.length >= 6 || '最少六个字符',
                emailMatch: () => ('密码格式错误'),
            },
            username: "",
            password: "",
        }),
        methods: {
            login() {
                //表单校验通过
                if (this.$refs.loginForm.validate()) {
                    this.$axios.post("/api/user/login", this.$qs.stringify({
                        username: this.username,
                        password: this.password
                    })).then(res => {
                        console.log(res);
                        let result = res.data;
                        let resultMessage = result.message;
                        if (result && result.code === 200) {
                            //持久化 accessToken、refreshToken 等 到cookie中
                            this.$store.commit("registerUserData", result.data);
                            let access_token = result.data.access_token;
                            let refresh_token = result.data.refresh_token;
                            this.$cookie.set('echo_access_token', access_token, 1);
                            this.$cookie.set('echo_refresh_token', refresh_token, 1);

                            //调用父组件 的方法
                            this.$emit("initUser");
                            this.$emit("closeLoginWindow");

                        } else {
                            this.$iziToast.error({message: resultMessage});
                            return false;
                        }
                    });
                }
            },
            /**
             * 触发登录事件
             * @param user
             */
            loginEvent: function (user) {
                this.user = user;
                if (user !== undefined) {
                    //入库gitHub提供的用户名和密码
                    this.$axios.post("/api/oauth/store", this.$qs.stringify(user)).then(res => {
                        let result = res.data;
                        if (result) {
                            if (result.code === 200) {
                                //持久化 accessToken、refreshToken 到cookie中
                                let access_token = result.data.access_token;
                                let refresh_token = result.data.refresh_token;
                                this.$cookie.set('echo_access_token', access_token, 30);
                                this.$cookie.set('echo_refresh_token', refresh_token, 30);
                                this.$store.commit("registerUserData", result);
                                //返回首页
                                this.$goRoute('/parallax');
                            }
                        }

                    });

                }
            },
            logoutEvent: function () {
                this.$axios.post("/api/oauth/loginOut", this.$qs.stringify({
                    access_token: this.$cookie.get("echo_access_token")
                })).then(res => {
                    let result = res.data;
                    if (result.code === 200) {
                        console.log("登录用户已移除")
                    }
                });
                this.user = null;
                this.$cookie.delete('accessToken');
                this.$cookie.delete("echo_access_token");
                this.$cookie.delete("echo_refresh_token");
                this.$cookie.delete("loginUser");
                this.$cookie.delete("avatar");
                this.$cookie.delete("signature");
            }
        }
    }
</script>

<style scoped>

</style>